<template>
  <div>
      <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创立时间</th>
              <th>操作</th>
          </tr>
          </thead>
          <tbody>
              <tr v-for="(obj,index) in arr" :key="obj.id">
                  <td>{{obj.id}}</td>  
                  <td>{{obj.name}}</td>
                  <td>{{obj.time}}</td>
                  <td><button @click="del(index)">删除</button></td>
              </tr>
              <tr v-show="arr.length===0">
                  <td colspan="4">没有数据咯</td>
              </tr>
          </tbody>
      </table>
  </div>
</template>

<script>
export default {
    data(){
       return{
            arr:[ {
            id:1,
            name:'奔驰',
            time:'2020-08-01'
            },
             {
            id:2,
            name:'奔驰',
            time:'2020-08-01'
            },
             {
            id:3,
            name:'奔驰',
            time:'2020-08-01'
            }
        ]
       }
    },
   methods: {
        del(index){
        this.arr.splice(index,1)
    }
   }
}
</script>

<style>
table,th,td,tr{
    border: 1px solid #000;
}
</style>